<template>
    <a-form :form="form" class="register-form" @submit="handleSubmit">
        <h1 style="font-size: 26px;margin-bottom: 5px;">欢迎注册吃惊账号！</h1>
        <p style="margin-bottom: 20px;">
            <span>已有账号？直接去</span>
            <router-link :to="{ name : 'login' }">登录</router-link>
        </p>
        <a-form-item>
            <a-input placeholder="请输入用户名" autocomplete="off" type="text"
                     v-decorator="[
                        'username',
                        { rules: [
                            { required: true, message: '请输入用户名' },
                            { pattern: /^[\u4e00-\u9fa5_a-zA-Z0-9]{3,18}$/, message: '由3~18个字母、数字、中文和下划线组成' },
                        ] }
                     ]"
            >
                <a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }"/>
            </a-input>
        </a-form-item>
        <a-form-item>
            <a-input-password placeholder="请输入登录密码" autocomplete="off" type="password"
                              v-decorator="[
                        'password',
                        { rules: [
                            { required: true, message: '请输入登录密码' },
                            { pattern: /^[a-zA-Z]\w{5,17}$/, message: '以字母开头,长度在6~18之间,只能包含字母、数字和下划线' }
                        ] }
                     ]"
            >
                <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }"/>
            </a-input-password>
        </a-form-item>
        <a-form-item>
            <a-input placeholder="请输入手机号码" autocomplete="off" type="text"
                     v-decorator="[
                        'userMobile',
                        { rules: [
                            { required: true, message: '请输入手机号码' },
                            { pattern: /^1(3|4|5|6|7|8|9)\d{9}$/,message: '请输入正确的手机号码' }
                        ] }
                     ]"
            >
                <a-icon slot="prefix" type="mobile" :style="{ color: 'rgba(0,0,0,.25)' }"/>
            </a-input>
        </a-form-item>
        <a-form-item>
            <a-input-search placeholder="请输入验证码" autocomplete="off" type="text" @search="sendSmsCode"
                            v-decorator="[
                                'code',
                                { rules: [
                                    { required: true, message: '请输入验证码' },
                                    { pattern: /^[0-9]{6}$/, message: '请输入正确的验证码' }
                                ] }
                             ]"
            >
                <a-icon slot="prefix" type="safety" :style="{ color: 'rgba(0,0,0,.25)' }"/>
                <a-button slot="enterButton" :disabled="pushSmsBtnState" type="primary">{{ pushSmsBtnText }}</a-button>
            </a-input-search>
        </a-form-item>
        <!-- 协议 -->
        <a-form-item>
            <a-checkbox v-decorator="[ 'allow',{ valuePropName: 'checked',rules :[ { required : true, message : '请先同意服务条款' } ] }]">
                <span>创建吃惊账号的同时,我阅读并同意遵守</span>
                <a href="javascript:void(0);">《吃惊平台服务协议》</a>
            </a-checkbox>
        </a-form-item>
        <a-button size="large" type="primary" html-type="submit" block>同意协议并注册</a-button>
    </a-form>
</template>

<script>
    import { register } from '../../apis/index';
    export default {
        data() {
            return {
                form : this.$form.createForm(this),
                //  获取验证码按钮文本
                pushSmsBtnText : '获取验证码',
                //  获取验证码按钮状态：{ true：禁用,false：可用 }
                pushSmsBtnState : false,
            };
        },
        methods: {
            //    发送短信验证码
            sendSmsCode() {
                // let $this = this;
                // //    校验手机号码为必填
                // this.form.validateFields(["userMobile"], (err, params) => {
                //     if (!err) {
                //         pushSmsCode(params['userMobile'],1).then(() => {
                //             let pointer = 120;
                //             $this.pushSmsBtnText = pointer + '秒后重新获取';
                //             $this.pushSmsBtnState = true;
                //             let interval = setInterval(() => {
                //                 --pointer;
                //                 if (pointer === 0){
                //                     //  结束计时器
                //                     clearInterval(interval);
                //                     $this.pushSmsBtnText = '获取验证码';
                //                     $this.pushSmsBtnState = false;
                //                     return;
                //                 }
                //                 $this.pushSmsBtnText = pointer + '秒后重新获取';
                //             },1000);
                //         });
                //     }
                // });
            },
            //    提交登录表单
            handleSubmit(e) {
                e.preventDefault();
                let $this = this;
                //  表单参数校验
                $this.form.validateFields((err, params) => {
                    if (!err) {
                        register(params).then(() => {
                            $this.$modal.success({
                                title : '注册成功',
                                content : '前往登录',
                                onOk : () => $this.$router.push({ name : 'login' })
                            });
                        });
                    }
                });
            }
        }
    };
</script>
<style scoped>
    .register-form {
        margin: 60px auto;
        width: 500px;
    }
</style>
